<template>
  <div id="app" style="overflow: hidden;">


    <router-view></router-view>



  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName: 'slide-right',

    }
  },
  created() {


  },
  watch: {

  }
}
</script>
<style scoped>
.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all 0.85s ease;
}


.scale-slide-enter-from {
  left: -100%;
}


.scale-slide-enter-to {
  left: 0%;
}


.scale-slide-leave-from {
  transform: scale(1);
}


.scale-slide-leave-to {
  transform: scale(0.8);
}

/* ----------------------------------------------
* Generated by Animista on 2021-12-20 15:59:30
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */


.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

.slide-fade {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  background-color: white;
}

.slide-fade-enter,
.slide-fade-leave-to {
  left: 0;
  top: 0;
  right: 0;
  position: absolute;
  transform: translateX(-500px) translateY(-500px) rotate(-150deg) scale(0.5);
  opacity: 1;
}

.slide-fade-enter-active {
  background-color: white;
  transition: all 0.6s ease;
}

.slide-fade-leave-active {
  transition: all 0.7s ease;
  background-color: white;
  transform: translateX(500px) translateY(500px) rotate(150deg) scale(1);
  z-index: 100;
}

/* ----------------------------------------------
* Generated by Animista on 2021-12-17 15:9:24
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation tilt-in-fwd-bl
* ----------------------------------------
*/
@-webkit-keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

@keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
* Generated by Animista on 2021-12-17 15:9:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@-webkit-keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}


.tilt-in-fwd-bl-enter,
.tilt-in-fwd-tr-leave-to {
  -webkit-animation: tilt-in-fwd-bl 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: tilt-in-fwd-bl 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  opacity: 0;
}

.tilt-in-fwd-tr-enter,
.tilt-in-fwd-bl-leave-to {
  -webkit-animation: tilt-in-fwd-tr 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: tilt-in-fwd-tr 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-fwd-tr-enter-active,
.tilt-in-fwd-tr-leave-active,
.tilt-in-fwd-bl-enter-active,
.tilt-in-fwd-bl-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}

/* ----------------------------------------------
* Generated by Animista on 2021-12-17 15:5:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation roll-in-left
* ----------------------------------------
*/
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.roll-in-left-enter,
.roll-in-right-leave-to {
  -webkit-animation: roll-in-left 1.5s ease-out both;
  animation: roll-in-left 1.5s ease-out both;
}

/* ----------------------------------------------
* Generated by Animista on 2021-12-17 15:5:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation roll-in-right
* ----------------------------------------
*/
@-webkit-keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.roll-in-right-enter,
.roll-in-left-leave-to {
  -webkit-animation: roll-in-right 1.5s ease-out both;
  animation: roll-in-right 1.5s ease-out both;
}

.roll-in-left-enter-active,
.roll-in-left-leave-active,
.roll-in-right-enter-active,
.roll-in-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}

.bounce-enter-active {

  animation: bounce-in 2s;
  opacity: 0;
}

.bounce-leave-active {
  animation: bounce-in 2s reverse;
  opacity: 1;
}

.bounce-enter-active,
.bounce-leave-active {
  transition: 2s;
  position: absolute;
  top: 0;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

/* 左右平滑 */
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);



}

.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%)
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}

/* 上下平滑 */

.slide-top-enter,
.slide-bottom-leave-to {
  opacity: 0;
  transform: translateY(100%);



}

.slide-top-leave-to,
.slide-bottom-enter {
  opacity: 0;
  transform: translateY(-100%)
}

.slide-top-enter-active,
.slide-top-leave-active,
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}

/* 左右反转 */
.rotateX-left-enter,
.rotateX-right-leave-to {
  opacity: 0;

  transform: rotateX(180deg);


}

.rotateX-left-leave-to,
.rotateX-right-enter {
  opacity: 0;

  transform: rotateX(-180deg);

}

.rotateX-left-enter-active,
.rotateX-left-leave-active,
.rotateX-right-enter-active,
.rotateX-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}

/* 上下反转 */
/* 左右反转 */
.rotateY-left-enter,
.rotateY-right-leave-to {
  opacity: 0;

  transform: rotateY(180deg);


}

.rotateY-left-leave-to,
.rotateY-right-enter {
  opacity: 0;

  transform: rotateY(-180deg);

}

.rotateY-left-enter-active,
.rotateY-left-leave-active,
.rotateY-right-enter-active,
.rotateY-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}
</style>